<template>
    <view class="page">
        <view class="single_box children_box">
            <view class="children">
                <view class="left">
                    <image
                        :src="studentHeadImage(showChildren.sex)"
                        mode=""
                        class="children_avatar"
                    ></image>
                    <view>
                        <view class="name_vip">
                            <text class="name">{{ showChildren.name }}</text>
                            <image
                                :src="`${OSS_URL}/iconfont/VIP/VIP_${showChildren.vip}.png`"
                                class="vip"
                            />
                        </view>
                        <view class="time"> 有效期至：{{ showChildren.endTime }} </view>
                    </view>
                </view>
                <view v-if="childrenList.length">
                    <image
                        :class="{ icon: true, rotate: showAllChildren }"
                        :src="arrow"
                        @click="handleShowAllChildren"
                    />
                </view>
            </view>
            <template v-if="showAllChildren">
                <view v-for="(i, idx) in childrenList" :key="idx" class="children">
                    <view class="left">
                        <image
                            :src="studentHeadImage(i.sex)"
                            mode=""
                            class="children_avatar"
                        ></image>
                        <view>
                            <view class="name_vip">
                                <text class="name">{{ i.name }}</text>
                                <image
                                    :src="`${OSS_URL}/iconfont/VIP/VIP_${i.vip}.png`"
                                    class="vip"
                                />
                            </view>
                            <view class="time"> 有效期至：{{ i.endTime }} </view>
                        </view>
                    </view>
                    <image
                        class="icon checked_icon"
                        :src="unchecked"
                        @click="handleShowChildren(i)"
                    /> </view
            ></template>
            <view class="children_info">
                <view class="item">
                    年级：<text class="level">{{ showChildren.grade }}</text>
                </view>
                <view class="item">
                    等级：<text class="level">{{ showChildren.level }}</text>
                </view>
            </view>
        </view>
        <view class="single_box filter_box">
            <view class="title">学科选择</view>
            <subjectFilter :tabsList="allGradeClass" @handleFilter="tapFilterSubject" />
        </view>
        <!-- 学习时长统计 -->
        <view class="single_box learning_time">
            <view class="title">学习时长统计</view>
            <view class="study_situation">
                <view class="item">
                    <text>累计学习</text>
                    <view><text class="date">1 </text>天</view>
                </view>
                <view class="item">
                    <text>连续学习</text>
                    <view><text class="date">1 </text>天</view>
                </view>
            </view>
            <view class="date_filter_box">
                <DateFilter
                    :list="dateFilterList"
                    @filter="i => handleFilterDate(i, '学习时长统计')"
                />
            </view>
            <BarChart :chartData="learningTime" />
        </view>
        <!-- 视频学习统计 -->
        <view class="single_box video_learning">
            <view class="title">视频学习统计</view>
            <view class="date_filter_box">
                <DateFilter
                    :list="dateFilterList"
                    @filter="i => handleFilterDate(i, '视频学习统计')"
                />
            </view>
            <view class="study_situation2">
                <view class="item">
                    <text class="item_label">已学视频</text>
                    <view class="item_date"
                        >42 <text style="color: #333">个</text
                        ><image
                            class="trend_icon"
                            :src="`${OSS_URL}/iconfont/learning_progress_${3}.png`"
                    /></view>
                </view>
                <view class="item">
                    <text class="item_label">观看视频时长</text>
                    <view class="item_date">
                        42<text style="color: #333"> 时 </text> 02<text style="color: #333">
                            分</text
                        >
                        <image
                            class="trend_icon"
                            :src="`${OSS_URL}/iconfont/learning_progress_${1}.png`"
                        />
                    </view>
                </view>
            </view>
            <LineChart :chartData="videoLearning" />
        </view>
        <!-- 知识图谱统计 -->
        <view class="single_box knowledge_mapping">
            <view class="title">知识图谱统计</view>
            <view class="chart_show">
                <RingChart />
            </view>
            <view class="date_filter_box">
                <DateFilter
                    :list="dateFilterList"
                    @filter="i => handleFilterDate(i, '知识图谱统计')"
                />
            </view>
            <view class="title2">我的知识图谱变化情况</view>
            <view class="chart_label">
                <view class="increase"><text class="iden_color"></text>增加</view>
                <view class="decrease"><text class="iden_color"></text>减少</view>
            </view>
            <ColumnChart :chartData="knowledgeAcquisition" />
            <view class="grasp_table">
                <view class="title2">已学知识点及掌握程度</view>
                <LearningGraspTable />
            </view>
        </view>
        <!-- 刷题统计 -->
        <view class="single_box exercise_statistics">
            <view class="title">刷题统计</view>
            <view class="date_filter_box">
                <DateFilter :list="dateFilterList" @filter="i => handleFilterDate(i, '刷题统计')" />
            </view>
            <view class="study_situation2">
                <view class="item">
                    <text class="item_label">做题数</text>
                    <view class="item_date">
                        42<text style="color: #333"> 道</text>
                        <image
                            class="trend_icon"
                            :src="`${OSS_URL}/iconfont/learning_progress_${1}.png`"
                        />
                    </view>
                </view>
                <view class="item">
                    <text class="item_label">产生错题数</text>
                    <view class="item_date">
                        42<text style="color: #333"> 道</text>
                        <image
                            class="trend_icon"
                            :src="`${OSS_URL}/iconfont/learning_progress_${1}.png`"
                        />
                    </view>
                </view>
                <view class="item">
                    <text class="item_label">订正错题数</text>
                    <view class="item_date">
                        42<text style="color: #333"> 道</text>
                        <image
                            class="trend_icon"
                            :src="`${OSS_URL}/iconfont/learning_progress_${1}.png`"
                        />
                    </view>
                </view>
            </view>
            <RingChart />
            <LineChart :chartData="exerciseStatistics" />
        </view>
        <!-- 语感学习统计 -->
        <view class="single_box language_statistics">
            <view class="title">语感学习统计</view>
            <view class="date_filter_box">
                <DateFilter
                    :list="dateFilterList"
                    @filter="i => handleFilterDate(i, '语感学习统计')"
                />
            </view>
            <view class="study_situation2">
                <view class="item">
                    <text class="item_label">句子练习数</text>
                    <view class="item_date"
                        >42 <text style="color: #333">句</text
                        ><image
                            class="trend_icon"
                            :src="`${OSS_URL}/iconfont/learning_progress_${3}.png`"
                    /></view>
                </view>
                <view class="item">
                    <text class="item_label">阅读词汇量</text>
                    <view class="item_date">
                        42<text style="color: #333"> 词</text>
                        <image
                            class="trend_icon"
                            :src="`${OSS_URL}/iconfont/learning_progress_${1}.png`"
                        />
                    </view>
                </view>
            </view>
            <LineChart :chartData="languageStatistics" />
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { studentHeadImage } from '@/hooks/useImage.js';
import SubjectFilter from './Components/subjectFilter.vue';
import DateFilter from './Components/dateFilter.vue';
import LearningGraspTable from './Components/learningGraspTable.vue';
import BarChart from './Components/Echart/BarChart.vue';
import RingChart from './Components/Echart/RingChart.vue';
import LineChart from './Components/Echart/LineChart.vue';
import ColumnChart from './Components/Echart/ColumnChart.vue';
import './index.scss';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const arrow = `${OSS_URL}/iconfont/down_arrow.png`;

const unchecked = `${OSS_URL}/iconfont/unchecked.png`;
const showAllChildren = ref(false);
const showChildren = ref({
    sex: 1,
    name: '昵称最长这么长昵称最长这么长',
    vip: 1,
    endTime: '2024.09.09',
    grade: '一年级',
    level: 1,
});
const childrenList = ref([
    {
        sex: 1,
        name: '昵称最长这么长昵称最长这么长',
        vip: 1,
        endTime: '2024.09.09',
        grade: '一年级',
        level: 1,
    },
    {
        sex: 1,
        name: '昵称2',
        vip: 20,
        endTime: '2024.09.09',
        grade: 'er年级',
        level: 2,
    },
]);
const otherChildrenList = ref([]);
const allGradeClass = ref([
    {
        gradeName: '英语',
    },
    {
        gradeName: '英语',
    },
    {
        gradeName: '英语',
    },
    {
        gradeName: '英语',
    },
    {
        gradeName: '英语',
    },
    {
        gradeName: '英语',
    },
    {
        gradeName: '英语',
    },
    {
        gradeName: '英语',
    },
]);
const dateFilterList = reactive([
    {
        value: 1,
        label: '今日',
    },
    {
        value: 2,
        label: '近一周',
    },
    {
        value: 3,
        label: '近一月',
    },
    {
        value: 4,
        label: '总计',
    },
]);
const learningTime = ref({
    categories: ['自由学', 'AI精准学', '错题本'],
    series: [
        {
            data: [
                { color: '#ff9e97', value: 6 },
                { color: '#ffb665', value: 6.5 },
                { color: '#9789ff', value: 6 },
            ],
        },
    ],
}); // 学习时长
const videoLearning = ref({
    categories: ['7/14', '7/15', '7/15', '7/14', '7/14', '7/14'],
    series: [
        {
            name: '时长统计',
            data: [35, 8, 25, 37, 4, 20],
            color: '#9789ff',
        },
    ],
});
// 刷题统计
const exerciseStatistics = ref({
    categories: ['7/14', '7/15', '7/15', '7/14', '7/14', '7/14'],
    series: [
        {
            name: '做题数',
            data: [12, 81, 25, 2, 1, 20],
            color: '#9789ff',
        },
        {
            name: '产生错题数',
            data: [35, 8, 35, 37, 4, 2],
            color: 'rgba(255, 168, 161, 1)',
        },
        { name: '订正错题数', data: [32, 8, 3, 7, 4, 20], color: 'rgba(60, 195, 223, 1)' },
    ],
});
const knowledgeAcquisition = ref({
    categories: ['陌生数', '熟悉数', '掌握数'],
    series: [
        {
            data: [
                { color: 'rgba(248, 104, 96, 1)', value: 6 },
                { color: 'rgba(69, 203, 70, 1)', value: 6.5 },
                { color: 'rgba(69, 203, 70, 1)', value: 6 },
            ],
        },
    ],
});
// 语感统计
const languageStatistics = ref({
    categories: ['7/14', '7/15', '7/15', '7/14', '7/14', '7/14'],
    series: [
        {
            name: '句子练习数',
            data: [1, 8, 25, 37, 4, 20],
            color: '#9789ff',
        },
        {
            name: '阅读词汇量',
            data: [35, 8, 35, 37, 4, 20],
            color: 'rgba(255, 168, 161, 1)',
        },
    ],
});
function handleFilterDate(i: any, type: string) {
    console.log('handleFilterDate1', i, type);
    switch (type) {
        case '学习时长统计':
            console.log('学习时长统计');
            break;
    }
}

// 展示所有孩子
function handleShowAllChildren() {
    showAllChildren.value = !showAllChildren.value;
}
function handleShowChildren(i: any) {
    showChildren.value = i;
}
function tapFilterSubject(i: any) {
    console.log('i');
}
</script>
